<template>
  <div class="pictureSearchForm">
    <!-- 搜索栏 -->
    <a-form layout="inline" :model="searchParam" @finish="doSearch">
      <a-form-item label="关键词">
        <a-input v-model:value="searchParam.searchText" placeholder="从名称和简介搜索" />
      </a-form-item>
      <a-form-item label="分类">
        <a-auto-complete
          style="min-width: 180px"
          v-model:value="searchParam.category"
          placeholder="请选择图片分类"
          :options="categoryOptions"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="标签">
        <a-select
          style="min-width: 180px"
          v-model:value="searchParam.tags"
          mode="tags"
          placeholder="请选择图片标签"
          :options="tagOptions"
          allow-clear
        />
      </a-form-item>

      <a-form-item name="dataRange" label="日期">
        <a-range-picker
          style="width: 400px"
          show-time
          :placeholder="[`编辑开始时间`, `编辑  结束时间`]"
          format="YYYY/MM/DD HH:mm:ss"
          v-model:value="dateRange"
          :picker="'date'"
          :presets="rangePresets"
          @change="onRangeChange"
        />
      </a-form-item>
      <a-form-item label="名称" name="name">
        <a-input v-model:value="searchParam.name" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item label="简介" name="introduction">
        <a-input v-model:value="searchParam.name" placeholder="请输入简介" />
      </a-form-item>
      <a-form-item label="宽度" name="picWidth">
        <a-input-number v-model:value="searchParam.picWidth" />
      </a-form-item>
      <a-form-item label="高度" name="picHeight">
        <a-input-number v-model:value="searchParam.picHeight" />
      </a-form-item>
      <a-form-item label="图片格式" name="picFormat">
        <a-input-number v-model:value="searchParam.picFormat" />
      </a-form-item>
      <a-form-item>
        <a-space
          ><a-button type="primary" html-type="submit" style="width: 96px">搜索</a-button>
          <a-button html-type="reset" @click="doClear">重置</a-button></a-space
        >
      </a-form-item>
    </a-form>

    <div style="margin-bottom: 16px"></div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { PIC_REVIEW_STATUS_OPTIONS } from '@/constants/picture'
import dayjs, { Dayjs } from 'dayjs'
import { message } from 'ant-design-vue'
import { listPictureTagCategoryUsingGet } from '@/api/pictureController'

type RangeValue = [Dayjs, Dayjs]
interface Props {
  onSearch?: (searchParam: API.PictureQueryRequest) => void
}
const dateRange = ref<[]>([])

const props = defineProps<Props>()
//搜索条件
const searchParam = reactive<API.PictureQueryRequest>({})

//搜索逻辑
function doSearch() {
  props.onSearch?.(searchParam)
}
//日期范围更改时触发
const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
  searchParam.startEditTime = dates[0].toDate()
  searchParam.endEditTime = dates[1].toDate()
}
//
const rangePresets = ref([
  { label: '过去 7 天', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '过去 14 天', value: [dayjs().add(-14, 'd'), dayjs()] },
  { label: '过去 30 天', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '过去 90 天', value: [dayjs().add(-90, 'd'), dayjs()] },
])

//获取分类
const categoryOptions = ref<{ value: string; label: string }[]>([])
const tagOptions = ref<{ value: string; label: string }[]>([])
/**
 * 获取分类和标签
 */
function getTagAndCategory() {
  listPictureTagCategoryUsingGet()
    .then((res) => {
      if (res.data.code === 200) {
        tagOptions.value = (res.data.data.tagList ?? []).map((data: string) => {
          return {
            value: data,
            label: data,
          }
        })
        categoryOptions.value = (res.data.data.categoryList ?? []).map((data: string) => {
          return {
            value: data,
            label: data,
          }
        })
      } else {
        message.error('获取失败' + res.data.data)
      }
    })
    .catch(() => {
      message.error('获取分类和标签异常')
    })
}
const doClear = () => {
  // 清空
  Object.keys(searchParam).forEach((key) => {
    searchParam[key] = undefined
  })
  dateRange.value = []
  props.onSearch?.(searchParam)
}

onMounted(() => {
  getTagAndCategory()
})
</script>
<style scoped>
.pictureSearchForm .ant-form-item {
  margin-top: 16px;
}
</style>
